<template>
	<view class="invoiceApply">
		<view class="filter_time_box">
			<view class="fn-sz-34 fn-cl-333333">筛选</view>
			<view class="choose_time_box mar-right-20 mar-left-30" @tap="start_time_show = true">
				<view class="fn-sz-28 fn-cl-333333 mar-right-30">
					<span v-if="start_time_text">{{ start_time_text }}</span>
					<span v-else>开始时间</span>
				</view>
				<image class="icon-30" src="../../static/images/icon/icon_bottom_fill_arr.png" mode=""></image>
			</view>
			<view class="choose_time_box" @tap="end_time_show = true">
				<view class="fn-sz-28 fn-cl-333333 mar-right-30">
					<span v-if="end_time_text">{{ end_time_text }}</span>
					<span v-else>结束时间</span>
				</view>
				<image class="icon-30" src="../../static/images/icon/icon_bottom_fill_arr.png" mode=""></image>
			</view>
		</view>
		<view class="invoice_order_list">
			<view class="invoice_order_item" v-for="item in invoiceOrderList.lists" :key="item.id">
				<image
					class="icon-36"
					src="../../static/images/icon/icon_check_raido_fill.png"
					mode=""
					v-if="checkList.indexOf(item.id) != -1"
					@tap="changeCheckList(false, item.id)"
				></image>
				<image class="icon-36" src="../../static/images/icon/icon_check_raido_gary.png" mode="" v-else @tap="changeCheckList(true, item.id)"></image>
				<view class="invoice_order_item_form">
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">订单编号</span>
						<span class="fn-sz-28 fn-cl-333333">{{ item.trade_no }}</span>
					</view>
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">订单类型</span>
						<span class="fn-sz-28 fn-cl-333333">{{ orderType[item.type] }}</span>
					</view>
					<view class="invoice_form_info_row_box">
						<span class="fn-sz-28 fn-cl-999999 mar-right-10">订单金额</span>
						<span class="fn-sz-28 fn-cl-333333">{{ item.order_price }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="fix_bottom_box">
			<view class="fix_bottom_left_box">
				<view class="choose_all_box">
					<image class="icon-36" src="../../static/images/icon/icon_check_raido_fill.png" mode="" v-if="checkAll" @tap="changeAllCheck(false)"></image>
					<image class="icon-36" src="../../static/images/icon/icon_check_raido_gary.png" mode="" @tap="changeAllCheck(true)" v-else></image>
					<span class="mar-left-12 fn-sz-26 fn-cl-666666">全选</span>
				</view>
				<view class="total_price_box">
					<span class="mar-right-10 fn-sz-26">合计:</span>
					<span class="fn-sz-204">￥</span>
					<span class="fn-sz-30">{{ totalPrice }}</span>
				</view>
			</view>
			<view class="apply_btn"><button class="yellow_btn" @tap="applyInvoiceFunc">申请开票</button></view>
		</view>
		<u-datetime-picker :show="start_time_show" v-model="start_time" mode="date" @confirm="comfirmSTime" @cancel="start_time_show = false"></u-datetime-picker>
		<u-datetime-picker :show="end_time_show" v-model="end_time" mode="date" @confirm="comfirmETime" @cancel="end_time_show = false"></u-datetime-picker>
	</view>
</template>

<script>
// import com from '../../mixin/index.js';
export default {
	// mixins: [com],
	data() {
		return {
			start_time_show: false,
			end_time_show: false,
			start_time: Number(new Date()),
			end_time: Number(new Date()),
			start_time_text: '',
			end_time_text: '',
			page: {
				page: 1,
				page_size: 4
			},
			invoiceOrderList: {
				lists: []
			},
			checkList: [],
			orderType: {
				1: '商城',
				2: '外卖',
				3: '社区团购',
				4: '一日游订单'
			}
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		comfirmSTime(val) {
			console.log(val, 'gwgwa');
			this.start_time_text = this.$helper.formatDate(val.value, 'yyyy-MM-dd');
			this.start_time_show = false;
			this.getList();
		},
		comfirmETime(val) {
			this.end_time_text = this.$helper.formatDate(val.value, 'yyyy-MM-dd');
			this.end_time_show = false;
			this.getList();
		},
		getList() {
			this.$api.getInvoiceOrderList({ start_time: this.start_time_text, end_time: this.end_time_text }).then(res => {
				console.log(res, '获取数据');
				if (res.code == 1) {
					this.invoiceOrderList.lists = res.data;
				}
			});
		},
		changeCheckList(type, id) {
			if (type) {
				this.checkList.push(id);
			} else {
				this.checkList = this.checkList.filter(item => item != id);
			}
		},
		changeAllCheck(type) {
			if (type) {
				this.checkList = this.invoiceOrderList.lists.map(item => item.id);
			} else {
				this.checkList = [];
			}
		},
		applyInvoiceFunc() {
			var allCheckList = [];
			this.checkList.forEach(item => {
				let findObj = this.invoiceOrderList.lists.find(elem => elem.id == item);
				allCheckList.push(findObj);
			});
			uni.navigateTo({
				url: `/pages/invoice/invoiceInfo?lists=${JSON.stringify(allCheckList)}`
			});
		}
	},
	computed: {
		checkAll() {
			if (this.checkList.length == this.invoiceOrderList.lists.length) {
				return true;
			} else {
				return false;
			}
		},
		totalPrice() {
			let totalPrice = 0;
			this.checkList.forEach(item => {
				let findObj = this.invoiceOrderList.lists.find(elem => elem.id == item);
				totalPrice += findObj.order_price * 1;
			});
			return totalPrice.toFixed(2);
		}
	}
};
</script>

<style lang="scss">
.invoiceApply {
	padding: 24rpx 24rpx 100rpx;
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #f9f9f9;
	.filter_time_box {
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 36rpx 22rpx;
		margin-bottom: 20rpx;
		.choose_time_box {
			background: #f9f9f9;
			border-radius: 10rpx;
			padding: 12rpx 26rpx;
			display: flex;
			align-items: center;
		}
	}
	.invoice_order_list {
		.invoice_order_item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 26rpx 28rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.invoice_order_item_form {
				margin-left: 25rpx;
				.invoice_form_info_row_box {
					margin-bottom: 12rpx;
				}
			}
		}
	}
	.fix_bottom_box {
		width: 100vw;
		left: 0;
		box-sizing: border-box;
		position: fixed;
		height: 118rpx;
		padding: 19rpx 24rpx;
		bottom: 0;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.fix_bottom_left_box {
			display: flex;
			align-items: center;
			.choose_all_box {
				display: flex;
				align-items: center;
				margin-right: 37rpx;
			}
			.total_price_box {
				color: #f34035;
			}
		}
		.apply_btn {
			.yellow_btn {
				height: 80rpx;
				width: 210rpx;
				line-height: 80rpx;
			}
		}
	}
}
</style>
